<template>
  <div style="height: 100%; padding-bottom: 40px;">
    <ul class="area-box">
      <li>
        <p>洗衣机停运数 <span class="color-4c">{{ deviceStatic.numX }}</span>, 停运率 <span class="color-y-ef">{{ rateX }}%</span></p>
        <p>烘干机停运数 <span class="color-4c">{{ deviceStatic.numH }}</span>, 停运率 <span class="color-y-ef">{{ rateH }}%</span></p>
      </li>
      <li>
        <div @click="seachClick()"> <i class="icon iconfont color-999">&#xe62b;</i> <span class="color-4c">搜索设备</span></div>
      </li>
    </ul>
    <div class="list-warp"
         v-infinite-scroll="loadMore3"
         infinite-scroll-disabled="faultLloading"
         infinite-scroll-immediate-check="false"
         infinite-scroll-distance="10">
      <div class="content-box" >
        <div v-for="(item, index) in list">

          <!--洗衣机-->
          <ul class="main-center" v-show="+item.deviceTypeId == 1">
            <li class="li1 bg-f">
              <div style="position: relative">
                <span class="icon-xyj we-icon"></span>
                <div class="li1-main1">
                  <div class="li1-sub1">
                    <p class="p1">型号：<span class="color-2f font-b">{{ item.modelName }}</span></p>
                    <p class="p2 color-4c"><b>使用次数：</b><span class="color-y-fc font-b">{{ item.useTime }}</span></p>
                  </div>
                  <div class="li1-sub2">
                    <p class="color-2a">洗衣机</p>
                    <p class="p-cj"> 厂家：<span class="color-4c">{{ item.venderName }}</span></p>
                  </div>
                </div>
              </div>
              <div class="line"></div>
              <div class="date-box">
                <div class="li1-main2">
                  <p>投产日期 <span class="color-4c">{{ item.bindTime}}</span></p>
                  <p>退出投运日期 <span class="color-ff3">{{item.quitTime}}</span></p>
                </div>
                <p>地址：<span class="color-4c">{{ item.address}}</span></p>
                <router-link :to="{ name: 'deviceOrder',
                params: { deviceTypeId: item.deviceTypeId, sn: item.sn, venderName: item.venderName, address: item.address, deviceId: item.deviceId}}">
                  <div style="text-align: center;padding-top: 3px;"> < 点击查看设备订单 > </div>
                </router-link>
              </div>

            </li>
            <li class="li2 bg-b-f3">
              <a href="javascript:;" class="weui-btn weui-btn_primary bg-b-btn" @click="withdrawHandle(item.sn, item.deviceStatus)">
                <i class="icon iconfont" style="vertical-align: bottom">&#xe62e;</i>
                设置
              </a>
              <div class="icon-box" v-on:click="Delete(item.sn)">
                <i class="icon iconfont">&#xe62a;</i>
              </div>
            </li>
          </ul>

          <!--烘干机-->
          <ul class="main-center" v-show="+item.deviceTypeId == 2">
            <li class="li1 bg-f">
              <div style="position: relative">
                <span class="icon-hgj we-icon"></span>
                <div class="li1-main1">
                  <div class="li1-sub1">
                    <p class="p1">型号：<span class="color-y-ef font-b">{{ item.modelName }}</span></p>
                    <p class="p2 color-4c"><b>使用次数：</b><span class="color-y-fc font-b">{{ item.useTime }}</span></p>
                  </div>
                  <div class="li1-sub2">
                    <p class="color-y-f7">烘干机</p>
                    <p class="p-cj"> 厂家：<span class="color-4c">{{ item.venderName }}</span></p>
                  </div>
                </div>
              </div>
              <div class="line"></div>
              <div class="date-box">
                <div class="li1-main2">
                  <p>投产日期 <span class="color-4c">{{ item.bindTime }}</span></p>
                  <p>退出投运日期 <span class="color-ff3">{{item.quitTime}}</span></p>
                </div>
                <p>地址：<span class="color-4c">{{ item.address }}</span></p>
                <router-link :to="{ name: 'deviceOrder',
                params: { deviceTypeId: item.deviceTypeId, sn: item.sn, venderName: item.venderName, address: item.address, deviceId: item.deviceId}}">
                  <div style="text-align: center;padding-top: 3px;"> < 点击查看设备订单 > </div>
                </router-link>
              </div>

            </li>
            <li class="li2 bg-b-f3">
              <a href="javascript:;" class="weui-btn weui-btn_primary bg-y-btn" @click="withdrawHandle(item.sn, item.deviceStatus)">
                <i class="icon iconfont" style="vertical-align: bottom">&#xe62e;</i>
                设置
              </a>
              <div class="icon-box" v-on:click="Delete(item.sn)" style="background: #e6dfbe;">
                <i class="icon iconfont">&#xe62a;</i>
              </div>
            </li>
          </ul>

        </div>
      </div>

      <!--加载更多-->
      <div class="weui-loadmore" v-show="loading">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
      </div>
      <noData v-if="list.length == 0 && !debut">
        <p>暂无数据</p>
      </noData>
      <div class="weui-loadmore weui-loadmore_line" v-show="noData" v-else>
        <span class="weui-loadmore__tips">我是有底线的</span>
      </div>

    </div>

    <!--搜索设备对话框-->
    <div>
      <seach v-show="seachShow" v-on:seachChild1="seachChild1" v-on:seachChild2="seachChild2" :item="3"></seach>
    </div>

  </div>
</template>
<script>
  import * as api from 'api';
  import noData from '@/components/noData';
  export default {
    props: {
      countNum: {
        type: Array
      }
    },
    data () {
      return {
        debut: true,
        // 设备统计
        deviceStatic: {
          numX: 0,
          numH: 0,
          rateX: 0,
          rateH: 0
        },
        seachShow: false,
        deviceChoose: 3,
        firstTime: '',
        endTime: '',
        noData: false,
        loading: false,
        faultLloading: false,
        deviceId: '',
        deviceStatus: 3,
        page: 0,
        modelType: '',
        device: '洗衣机',
        limit: 10,
        deviceType: 1,  // 判断是洗衣机还是烘干机
        list: [],
        seach: {
          deviceTypeId: '',
          modelName: '',
          startTime: '',
          endTime: ''
        }
      }
    },
    components: {
      seach: require('./seach.vue'),
      noData
    },
    methods: {
      seachChild1 (data) {
        this.seachShow = data
        this.faultLloading = data;
        this.loading = data;
        this.noData = data
      },
      seachChild2 (data) {
        this.list = data[0]
        this.seach.deviceTypeId = data[1]
        this.seach.modelName = data[2]
        this.seach.startTime = data[3]
        this.seach.endTime = data[4]
        if (this.list.length === 1) {
          this.faultLloading = true;
          this.loading = false;
          this.noData = true
        } else if (this.list.length === 0) {
          this.faultLloading = false;
          this.loading = false;
          this.noData = true
        } else {
          this.loading = true;
        }
      },

      init () {
        this.faultLloading = false;
        this.noData = false;
        api.queryDeviceInfo({
          agencyId: this.$store.state.userInfo.id,
          deviceStatus: this.deviceStatus,
          offset: 0,
          limit: this.limit,
          flags: 1
        })
          .then(res => {
            this.debut = false
            res.resultData.forEach((item, index) => {
              item.bindTime = item.bindTime.slice(0, 10);
              item.quitTime = item.quitTime.slice(0, 10)
            })
            this.list = res.resultData;
            this.faultLloading = false;
          })
      },
      // 设备列表
      query (loadMore) {
        api.queryDeviceInfo({
          agencyId: this.$store.state.userInfo.id,
          deviceStatus: this.deviceStatus,
          offset: this.page * 10,
          limit: this.limit,
          flags: 1,
          deviceTypeId: this.seach.deviceTypeId,
          modelName: this.seach.modelName,
          startTime: this.seach.startTime,
          endTime: this.seach.endTime
        })
          .then(res => {
            res.resultData.forEach((item, index) => {
              item.bindTime = item.bindTime.slice(0, 10);
              item.quitTime = item.quitTime.slice(0, 10)
            })
            if (loadMore) {
              if (this.list.length >= res.total) {
                this.faultLloading = true;
                this.loading = false;
                this.noData = true;
              } else {
                this.list = this.list.concat(res.resultData);
                this.faultLloading = false;
                this.loading = false;
              }
            } else {
              this.list = res.resultData;
              this.faultLloading = false;
            }
          })
      },

      // 下拉加载
      loadMore3 () {
        this.faultLloading = true;
        this.loading = true;
        this.page++
        this.query(true)
      },

      // 解绑设备，弹窗显示
      Delete (data) {
        this.$emit('childDel', [true, data])
      },

      // 设置设备状态-对话框
      withdrawHandle (data1, data2) {
        this.$emit('childSet', [true, data1, data2])
      },

      // 搜索
      seachClick () {
        this.seachShow = true
      },

      // 统计查询
      queryStatic () {
        api.queryStatus({
          agencyId: this.$store.state.userInfo.id,
          statusType: this.deviceChoose
        })
          .then(res => {
            res.resultData.forEach((item, index) => {
              if (item.deviceType === '1') {
                this.deviceStatic.numX = item.deviceCount - 0
              } else if (item.deviceType === '2') {
                this.deviceStatic.numH = item.deviceCount - 0
              } else {
                weui.toast('数据错误', 1000)
              }
            })
          })
      }
    },
    computed: {
      rateX () {
        return this.countNum[0] !== 0 && +this.deviceStatic.numX !== 0 ? (((+this.deviceStatic.numX / this.countNum[0])) * 100).toFixed(2) : 0.00;
      },
      rateH () {
        return this.countNum[1] !== 0 && +this.deviceStatic.numH !== 0 ? (((+this.deviceStatic.numH / this.countNum[1])) * 100).toFixed(2) : 0.00;
      }
    },
    created () {
      // this.queryStatic()
    }
  }
</script>
